<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="vxe-pc-ui-4.4.4/lib/style.min.css">
    <link rel="stylesheet" href="vxe-table-4.11.8/lib/style.min.css">
    <!-- 引入vue -->
    <script src="vue-3.4.27/vue.global.prod.js"></script>
    <!-- 引入组件 -->
    <script src="xe-utils-3.7.4/dist/xe-utils.umd.min.js"></script>
    <script src="vxe-pc-ui-4.4.4/lib/index.umd.min.js"></script>
    <script src="vxe-table-4.11.8/lib/index.umd.min.js"></script>
    <!--jquery-->
    <script src="jquery-3.7.1/dist/jquery.min.js"></script>
    <style>
        html, body, #app {
            height: 98%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="max-width: 1600px;margin: 5px auto;">
        <h2>查询条件:</h2>
        <vxe-form
                title-width="120"
                :data="formData"
                @submit="submitEvent">
            <vxe-form-item title="app_id" field="appId" span="12" :item-render="{name: 'VxeInput'}"></vxe-form-item>
            <vxe-form-item title="第三方厂商平台id" field="thirdId" span="12" :item-render="{name: 'VxeNumberInput'}"></vxe-form-item>
            <vxe-form-item align="center" span="24">
                <template #default>
                    <vxe-button type="submit" status="primary">查询</vxe-button>
                    <vxe-button type="reset">重置</vxe-button>
                </template>
            </vxe-form-item>
        </vxe-form>

        <h2>社会运营平台_app配置列表:
            <vxe-button type="primary" @click="handleAdd">新增</vxe-button>
        </h2>
        <vxe-table
                border
                show-footer
                show-overflow
                :data="tableData"
                :loading="loading"
                height="600">  <!-- 固定表格高度为600px -->
            <vxe-column field="seq" type="seq" title="序号" width="60"></vxe-column>
            <vxe-column field="id" title="主键id" width="120"></vxe-column>
            <vxe-column field="appId" title="app_id" width="120"></vxe-column>
            <vxe-column field="appKey" title="app_key" width="120"></vxe-column>
            <vxe-column field="thirdId" title="第三方厂商平台id" width="150"></vxe-column>
            <vxe-column field="areaCode" title="对接区域编码" width="120"></vxe-column>
            <vxe-column field="areaName" title="对接区域名称" width="120"></vxe-column>
            <vxe-column field="operatorId" title="社会运营商id" width="150"></vxe-column>
            <vxe-column field="thirdDataName" title="社会运营中心名称" width="150"></vxe-column>
            <vxe-column field="thirdDataTel" title="社会运营中心电话" width="150"></vxe-column>
            <vxe-column field="codePrefix" title="第三方编号前缀" width="150"></vxe-column>
            <vxe-column field="onLine" title="是否在线" width="100" formatter="{ cellValue } => cellValue === 1 ? '在线' : '离线'"></vxe-column>
            <vxe-column field="expireTime" title="过期时间" width="180"></vxe-column>
            <vxe-column field="limitDeviceCode" title="受限制的设备类型编码" width="200"></vxe-column>
            <vxe-column field="status" title="状态" width="100" formatter="{ cellValue } => cellValue === 0 ? '正常' : cellValue"></vxe-column>
            <vxe-column field="createTime" title="创建时间" width="180" formatter="{ cellValue } => XEUtils.formatDate(cellValue, 'yyyy-MM-dd HH:mm:ss')"></vxe-column>
            <vxe-column field="createUser" title="创建人" width="120"></vxe-column>
            <vxe-column field="updateTime" title="更新时间" width="180"></vxe-column>
            <vxe-column field="updateUser" title="修改人" width="120"></vxe-column>
            <vxe-column field="thirdControlCenterId" title="社会运营中心表id" width="150"></vxe-column>
            <vxe-column title="操作" width="180" fixed="right">  <!-- 关键修改：固定在右侧 -->
                <template #default="{ row }">
                    <vxe-button type="info" size="small" @click="handleEdit(row)">编辑</vxe-button>
                    <vxe-button type="danger" size="small" @click="handleDelete(row.id)">删除</vxe-button>
                </template>
            </vxe-column>
        </vxe-table>
        <!-- 新增分页组件 -->
        <vxe-pager
                :current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                @page-change="handlePageChange"
                @size-change="handleSizeChange"
                style="margin-top: 16px;">
        </vxe-pager>
        <!-- 新增/编辑模态框 -->
        <vxe-drawer
                v-model="dialogVisible"
                title="新增/编辑配置"
                placement="right"
                width="600px"
                mask-closable>
                <vxe-form
                    :data="currentRow"
                    :rules="formRules"
                    @submit="handleSave"
                    title-align="right"
                    title-width="120">
                <!-- 调整为每行一个字段（span=24） -->
                <vxe-form-item title="app_id" field="appId" span="24" :item-render="{name: 'VxeInput'}"></vxe-form-item>
                <vxe-form-item title="app_key" field="appKey" span="24" :item-render="{name: 'VxeInput'}"></vxe-form-item>
                <vxe-form-item title="第三方厂商平台id" field="thirdId" span="24" :item-render="{name: 'VxeNumberInput'}"></vxe-form-item>
                <vxe-form-item title="对接区域编码" field="areaCode" span="24" :item-render="{name: 'VxeInput'}"></vxe-form-item>
                <vxe-form-item title="对接区域名称" field="areaName" span="24" :item-render="{name: 'VxeInput'}"></vxe-form-item>
                <vxe-form-item title="社会运营商id" field="operatorId" span="24" :item-render="{name: 'VxeNumberInput'}"></vxe-form-item>
                <vxe-form-item title="社会运营中心名称" field="thirdDataName" span="24" :item-render="{name: 'VxeInput'}"></vxe-form-item>
                <vxe-form-item title="社会运营中心电话" field="thirdDataTel" span="24" :item-render="{name: 'VxeInput'}"></vxe-form-item>
                <vxe-form-item title="第三方编号前缀" field="codePrefix" span="24" :item-render="{name: 'VxeInput'}"></vxe-form-item>
                <vxe-form-item title="是否在线" field="onLine" span="24">
                    <template #default>
                        <vxe-radio-group v-model="currentRow.onLine">
                            <vxe-radio label="1">在线</vxe-radio>
                            <vxe-radio label="0">离线</vxe-radio>
                        </vxe-radio-group>
                    </template>
                </vxe-form-item>
                <vxe-form-item align="center" span="24" style="margin-top: 24px;">
                    <vxe-button type="submit" status="primary" style="margin-right: 16px;">保存</vxe-button>
                    <vxe-button @click="dialogVisible = false">取消</vxe-button>
                </vxe-form-item>
            </vxe-form>
        </vxe-drawer>
        <vxe-layout-footer>
            <div class="page-footer">
                <span>版权所有 ©<vxe-link href="https://vxeui.com/" target="_blank">vxe</vxe-link> 2018-</span>
            </div>
        </vxe-layout-footer>
    </div>
</div>
<script>
    (function () {
        var App = {
            data() {
                return {
                    // form
                    formData: {
                        appId: '',
                        thirdId: null
                    },
                    formRules: {
                        appId: [
                            { required: true, message: 'app_id为必填项' }
                        ],
                        appKey: [
                            { required: true, message: 'app_key为必填项' }
                        ],
                        thirdId: [
                            { required: true, message: '第三方厂商平台id为必填项' },
                            { type: 'number', message: '请输入有效数字' }
                        ]
                    },
                    // table
                    tableData: [],
                    loading: false,
                    dialogVisible: false,  // 控制模态框显示
                    currentRow: {},         // 当前编辑/新增的数据
                    currentPage: 1,   // 新增：当前页码
                    pageSize: 10,     // 新增：每页数量
                    total: 0          // 新增：总记录数
                }
            },
            mounted() {
                this.submitEvent();  // 页面加载后自动查询
            },
            methods: {
                submitEvent() {
                    this.loading = true;
                    fetch(`/cfsUserAppConfig/list?current=${this.currentPage}&size=${this.pageSize}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(this.formData)
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.code === 200) {
                                this.tableData = data.data.records;
                                this.total = data.data.total;  // 同步总记录数
                            }
                        })
                        .catch(error => {
                            console.error('查询失败:', error);
                        })
                        .finally(() => {
                            this.loading = false;
                        });
                },
                // 新增分页事件处理
                handlePageChange(page) {
                    this.currentPage = page;
                    this.submitEvent();
                },
                handleSizeChange(size) {
                    this.pageSize = size;
                    this.currentPage = 1;  // 切换每页数量时重置为第一页
                    this.submitEvent();
                },
                resetEvent() {
                    this.formData = {
                        appId: '',
                        thirdId: null
                    };
                    this.submitEvent();
                },
                // 新增按钮点击事件
                handleAdd() {
                    this.currentRow = {};  // 清空编辑数据
                    this.dialogVisible = true;
                },
                // 编辑按钮点击事件
                handleEdit(row) {
                    this.currentRow = { ...row };  // 深拷贝当前行数据
                    this.dialogVisible = true;
                },
                // 删除按钮点击事件
                handleDelete(id) {
                    if (!confirm('确定要删除这条记录吗？')) return;
                    fetch(`/cfsUserAppConfig/delete/${id}`, { method: 'DELETE' })
                        .then(res => res.json())
                        .then(data => {
                            if (data.code === 200) {
                                this.submitEvent();  // 删除成功后刷新列表
                            }
                        });
                },
                // 保存（新增/编辑）事件
                handleSave() {
                    const url = this.currentRow.id ? `/cfsUserAppConfig/update` : `/cfsUserAppConfig/save`;
                    const method = this.currentRow.id ? 'PUT' : 'POST';

                    fetch(url, {
                        method,
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(this.currentRow)
                    })
                        .then(res => res.json())
                        .then(data => {
                            if (data.code === 200) {
                                this.dialogVisible = false;
                                this.submitEvent();  // 保存成功后刷新列表
                            }
                        });
                }
            }
        }
        // 保持原有挂载逻辑
        Vue.createApp(App).use(VxeUI).use(VxeUITable).mount('#app')
    })()
</script>
</body>
</html>